<template>
	<view class="container">
		<view class="headView" @click="headViewTap">
			<view style="display: flex;flex-direction: row;">
				<image class="headImgView" :src="shopInfo.logoModel.url||'https://ky.railshj.cn/protocol/icon/images/mine/mine_avatar.png'"
				 mode="aspectFill"></image>
				<view class="content">
					<view class="nickname">{{shopInfo.name ? shopInfo.name : '未设置'}}</view>
					<view class="phone" style="margin-top: 10rpx;color: #666666;" v-if="shopInfo.addr">{{shopInfo.addr}}</view>
					<view class="phone" style="margin-top: 10rpx;color: #666666;" v-else>校区：{{shopInfo.orgModel.name}}</view>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
			<view v-for="(item, index) in itemList" @click="itemHandle(item)"
			style="display: flex;flex-direction: column;margin-top: 16rpx;background-color: #FFF;width: 345rpx;margin-left: 20rpx;">
				<image :src="item.coverUrl" mode='aspectFill' style="width: 100%;height: 380rpx;"></image>
				<view style="padding: 16rpx;">
					<view style="font-size: 28rpx;">{{item.name}}</view>
					<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
						<view style="margin-top: 10rpx;color: #fa3534;">¥{{item.price}}</view>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 12rpx;align-items: center;justify-content: space-between;">
						<view style="color: #fa3534;" v-if="item.status==0">未上架</view>
						<view style="color: #fa3534;" v-else>在售</view>
						<view style="width: 140rpx;" @click="setProduct(item)"><u-button type="primary" text="设置"></u-button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { shop } from '@/api/shop.js'
	import { product } from '@/api/product.js'
	export default{
		components: {},
		data() {
			return {
				page: 1,
				size: 20,
				itemList: [],
				showEmpty: false,
				isLastPage: false,
				shopInfo: {}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1
			this.getShopinfo()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getItemList()
		},
		onReachBottom() {
			if(this.isLastPage) {
				return
			}
			this.getItemList()
		},
		methods:{
			getShopinfo() {
				shop.getShopinfo({
					obj_id: this.$Route.query.shop
				}).then(res => {
					if (res.data.code == 10000) {
						this.shopInfo = res.data.data
						this.getItemList()
					}
				})
			},
			getItemList() {
				product.getProductList({
					page: this.page,
					size: this.size,
					shop: this.shopInfo.id
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.itemList = []
						}
						var list = res.data.data.list
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length<1
						if (res.data.data.next) {
							this.page += 1
						} else {
							this.isLastPage = true
						}
					}
				})
			},
			itemHandle(item) {
				this.$Router.push({
					name: 'itemDetail',
					params: {
						productId: item.id
					}
				})
			},
			setProduct(item){
				this.$Router.push({
					name: 'setProduct',
					params: {
						productId: item.id
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.headView {
		width: 750rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		background-color: #FFF;
	
		.headImgView {
			margin-left: 20rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}
	
		.content {
			margin-left: 16rpx;
			display: flex;
			flex-direction: column;
			width: 100%;
			.nickname {
				font-size: 34rpx;
				font-weight: bold;
			}
	
			.phone {
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}
	}
</style>
